<!DOCTYPE html>
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <title>ECMAScript 6 Support in Esprima</title>
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" type="text/css" href="../assets/style.css"/>
  <link rel="stylesheet" href="../assets/foundation/foundation.min.css">
  <link rel="stylesheet" type="text/css" href="../assets/prettify/prettify.css"/>
  <script type="text/javascript" src="../assets/prettify/prettify.js"></script>
<style>
pre.prettyprint {
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 6px 10px;
    xfont-size: 13px;
    xline-height: 19px;
    margin-bottom: 14px;
}
</style>
</head>

<body onload="prettyPrint()">

  <!-- Navigation bar -->
  <div class="row">
    <div class="twelve columns">
      <nav class="top-bar">
        <ul>
          <li class="name">
             <h1><a href="../index.html">Esprima</a></h1>
          </li>
        </ul>
        <section>
          <ul class="right">
            <li class="divider show-for-medium-and-up"></li>
            <li class="has-dropdown">
              <a href="../demo/index.html">Demo</a>
              <ul class="dropdown">
                <li><label>Static Analysis</label></li>
                <li><a href="../demo/parse.html">Online Parsing</a></li>
                <li><a href="../demo/validate.html">Syntax Validator</a></li>
                <li><a href="../demo/precedence.html">Operator Precedence</a></li>
                <li><a href="../demo/collector.html">Regex Collector</a></li>
                <li><label>Dynamic Tracing</label></li>
                <li><a href="../demo/functiontrace.html">Function Instrumentation</a></li>
                <li><label>Code Transformation</label></li>
                <li><a href="../demo/rewrite.html">Source Rewrite</a></li>
                <li><a href="../demo/minify.html">Minifiy &amp; Obfuscate</a></li>
                <li><label>Editing Tools</label></li>
                <li><a href="../demo/highlight.html">Identifier Highlight</a></li>
                <li><a href="../demo/rename.html">Rename Refactoring</a></li>
                <li><a href="../demo/autocomplete.html">Autocomplete</a></li>
              </ul>
            </li>
            <li class="has-dropdown">
              <a href="#">Project</a>
              <ul class="dropdown">
                <li><a href="http://github.com/ariya/esprima">Git Repository</a></li>
                <li><a href="https://travis-ci.org/ariya/esprima">Continuous Integration</a></li>
                <li><a href="http://groups.google.com/group/esprima">Mailing List</a></li>
                <li><a href="http://issues.esprima.org/">Issue Tracker</a></li>
                <li class="divider"></li>
                <li><label>QA</label></li>
                <li><a href="../test/index.html">Unit Tests</a></li>
                <li><a href="../test/benchmarks.html">Benchmarks Suite</a></li>
                <li><a href="../test/compat.html">Compatibility Tests</a></li>
                <li><a href="../test/compare.html">Speed Comparison</a></li>
                <li><a href="../test/module.html">Module Loading</a></li>
                <li><a href="../test/coverage.html">Coverage Analysis</a></li>
              </ul>
            </li>
            <li><a href="../doc/index.html">Documentation</a></li>
          </ul>
        </section>
      </nav>
    </div>
  </div>

  <!-- Title and subtitle -->
  <div class="row">
    <div class="twelve columns">
       <h3 class="subheader"><strong>ECMAScript 6</strong> with Esprima</h3>
    </div>
  </div>

  <!-- Main content -->
  <div class="row">
    <div class="eight columns">

<p>From version 2.0, Esprima starts to support new features in ECMAScript 6.</p>

<h4 id="arrowfunction">Arrow Function</h4>

<p><em>Since: version 2.0. Specification: <a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-arrow-function-definitions">section 14.2</a>.</em></p>

<p>Example code snippet:</p>

<pre class="prettyprint lang-js">
array.map(x => x * x)
</pre>


<p>The corresponding syntax tree:</p>

<pre class="prettyprint lang-json">
{
    "type": "Program",
    "body": [
        {
            "type": "ExpressionStatement",
            "expression": {
                "type": "CallExpression",
                "callee": {
                    "type": "MemberExpression",
                    "computed": false,
                    "object": {
                        "type": "Identifier",
                        "name": "array"
                    },
                    "property": {
                        "type": "Identifier",
                        "name": "map"
                    }
                },
                "arguments": [
                    {
                        "type": "ArrowFunctionExpression",
                        "id": null,
                        "params": [
                            {
                                "type": "Identifier",
                                "name": "x"
                            }
                        ],
                        "defaults": [],
                        "body": {
                            "type": "BinaryExpression",
                            "operator": "*",
                            "left": {
                                "type": "Identifier",
                                "name": "x"
                            },
                            "right": {
                                "type": "Identifier",
                                "name": "x"
                            }
                        },
                        "rest": null,
                        "generator": false,
                        "expression": true
                    }
                ]
            }
        }
    ]
}
</pre>

<h4 id="defaultparameter">Default Parameter Value</h4>

<p><em>Since: version 2.0. Specification: <a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-function-definitions">section 14.1</a>.</em></p>

<p>Example code snippet:</p>

<pre class="prettyprint lang-js">
function answer(x = 42) { say(x); }
</pre>

<p>The corresponding syntax tree:</p>

<pre class="prettyprint lang-json">
{
    "type": "Program",
    "body": [
        {
            "type": "FunctionDeclaration",
            "id": {
                "type": "Identifier",
                "name": "answer"
            },
            "params": [
                {
                    "type": "Identifier",
                    "name": "x"
                }
            ],
            "defaults": [
                {
                    "type": "Literal",
                    "value": 42,
                    "raw": "42"
                }
            ],
            "body": {
                "type": "BlockStatement",
                "body": [
                    {
                        "type": "ExpressionStatement",
                        "expression": {
                            "type": "CallExpression",
                            "callee": {
                                "type": "Identifier",
                                "name": "say"
                            },
                            "arguments": [
                                {
                                    "type": "Identifier",
                                    "name": "x"
                                }
                            ]
                        }
                    }
                ]
            },
            "rest": null,
            "generator": false,
            "expression": false
        }
    ]
}
</pre>

<h4 id="codepointescape">Unicode Code Point Escape Sequence</h4>
<p><em>Since: version 2.0. Specification: <a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-literals-string-literals">section 11.8.4</a>.</em></p>

<p>Example code snippet:</p>

<pre class="prettyprint lang-js">
x = '\u{41}'
</pre>

<p>The corresponding syntax tree:</p>

<pre class="prettyprint lang-js">
{
    "type": "Program",
    "body": [
        {
            "type": "ExpressionStatement",
            "expression": {
                "type": "AssignmentExpression",
                "operator": "=",
                "left": {
                    "type": "Identifier",
                    "name": "x"
                },
                "right": {
                    "type": "Literal",
                    "value": "A",
                    "raw": "'\\u{41}'"
                }
            }
        }
    ]
}
</pre>

    </div>

    <div class="four columns">
      <div class="panel">
          <p><b>Contents</b></p>
          <ol>
              <li><a href="#arrowfunction">Arrow Function</a></li>
              <li><a href="#defaultparameter">Default Parameter Value</a></li>
              <li><a href="#codepointescape">Unicode Code Point Escapee</a></li>
          </ol>
      </div>
      <p><strong>Note</strong>: Partial ES6 support also exists in the experimental <em>harmony</em> branch.
      However, this branch has never been officially released and the features are not documented.</p>

    </div>
  </div>

  <!-- Footer -->
  <div class="row copyright">
    <div class="six columns">
      <p>Esprima is created and mantained by <a href="http://ariya.ofilabs.com/about">Ariya Hidayat</a>.</p>
    </div>
    <div class="six columns">
      <ul class="link-list right">
        <li><a href="http://twitter.com/esprima">@Esprima</a></li>
        <li><a href="https://github.com/ariya/esprima">GitHub</a></li>
      </ul>
    </div>
  </div>

</body>
</html>
